<template>
  <el-card class="usage-progress">
    <div class="header">
      <div class="current-usage">
        <span class="label">{{ typeLabel }}</span>
        <div class="value">
          {{ data.currentUsage }}
          <span class="unit">{{ data.unit }}</span>
        </div>
      </div>
      <div class="target-usage">
        <span class="label">目标用量</span>
        <div class="value">
          {{ data.targetUsage }}
          <span class="unit">{{ data.unit }}</span>
        </div>
      </div>
    </div>

    <!-- 进度条 -->
    <div class="progress-section">
      <el-progress :percentage="progressPercentage" :status="progressStatus" :stroke-width="15" :show-text="false" />
    </div>

    <!-- 进度信息 -->
    <div class="progress-info">
      <span>使用进度</span>
      <span class="percentage">{{ progressPercentage.toFixed(1) }}%</span>
    </div>

    <!-- 状态提示 -->
    <el-alert v-if="progressPercentage >= 90" :title="statusInfo.message" :type="statusInfo.type" :closable="false"
      class="status-alert" />
  </el-card>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => ({
      type: 'electric',
      currentUsage: 0,
      targetUsage: 100,
      unit: 'kWh'
    })
  }
})

// 计算类型标签
const typeLabel = computed(() => {
  const typeMap = {
    electric: '电量',
    water: '水量',
    gas: '燃气'
  }
  return typeMap[props.data.type] || props.data.type
})

// 计算进度百分比
const progressPercentage = computed(() => {
  return Math.min((props.data.currentUsage / props.data.targetUsage) * 100, 100)
})

// 计算进度条状态
const progressStatus = computed(() => {
  if (progressPercentage.value >= 100) return 'exception'
  if (progressPercentage.value >= 90) return 'warning'
  return 'success'
})

// 计算状态信息
const statusInfo = computed(() => {
  if (progressPercentage.value >= 100) {
    return {
      type: 'error',
      message: '已超出目标用量'
    }
  }
  if (progressPercentage.value >= 90) {
    return {
      type: 'warning',
      message: '接近目标用量'
    }
  }
  return {
    type: 'success',
    message: '使用正常'
  }
})
</script>

<style scoped>
.usage-progress {
  max-width: 400px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.current-usage,
.target-usage {
  display: flex;
  flex-direction: column;
}

.label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 4px;
}

.value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.unit {
  font-size: 14px;
  color: #909399;
  margin-left: 4px;
}

.target-usage .value {
  font-size: 18px;
  text-align: right;
}

.progress-section {
  margin: 20px 0;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #606266;
  margin-bottom: 16px;
}

.percentage {
  font-weight: 500;
}

.status-alert {
  margin-top: 16px;
}

:deep(.el-progress-bar__innerText) {
  font-size: 12px;
}
</style>
